<template>
  <div class="sub-category">
    <el-breadcrumb class="breadcrumb" :separator-icon="ArrowRight">
      <el-breadcrumb-item class="breadcrumb-item" :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item
        class="breadcrumb-item"
        :to="{ path: `/category/${categoryData.parentId}` }"
      >
        {{ categoryData.parentName }}</el-breadcrumb-item
      >

      <el-breadcrumb-item class="breadcrumb-item">
        {{ categoryData.name }}
      </el-breadcrumb-item>
    </el-breadcrumb>

    <div class="sub-list">
      <el-tabs v-model="queryParams.sortField" type="card" class="tab" @tab-click="tabChange">
        <el-tab-pane label="最新商品" name="publishTime"></el-tab-pane>
        <el-tab-pane label="最高人气" name="orderNum"></el-tab-pane>
        <el-tab-pane label="评论最多" name="evaluateNum"></el-tab-pane>
      </el-tabs>

      <ul v-infinite-scroll="loadGoodsList" :infinite-scroll-disabled="disabledLoad">
        <li v-for="i in goodsList" :key="i.id" class="item">
          <GoodsItem :goods="i" class="goods" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup name="ComponentName">
import { onMounted, reactive, ref } from 'vue'
import GoodsItem from '@/views/Home/components/GoodsItem.vue'
import { getCategoryFilterAPI, getSubCategoryGoodsAPI } from '@/api/category'
import { ArrowRight } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
const route = useRoute()

const categoryData = ref({})
const getCategoryData = async (id = route.params.id) => {
  const res = await getCategoryFilterAPI(id)
  categoryData.value = res.result
}
onMounted(() => getCategoryData())

// 获取基础列表数据渲染
const goodsList = ref([])
// 查询参数
const queryParams = reactive({
  categoryId: route.params.id,
  page: 1,
  pageSize: 20,
  sortField: 'publishTime',
})
const getGoodsList = async () => {
  console.log(queryParams.categoryId)
  const res = await getSubCategoryGoodsAPI(queryParams)
  goodsList.value = res.result.items
}
onMounted(() => getGoodsList())
const tabChange = () => {
  queryParams.page = 1
  getGoodsList()
}

// 加载更多
const disabledLoad = ref(false)
const loadGoodsList = async () => {
  queryParams.page++
  const res = await getSubCategoryGoodsAPI(queryParams)
  goodsList.value.push(...res.result.items)

  // 加载完毕，停止监听
  if (res.result.items.length === 0) {
    disabledLoad.value = true
  }
}
</script>

<style scoped lang="scss">
.breadcrumb {
  padding: 20px 100px;
  .breadcrumb-item {
    font-size: 16px;
    color: #333;
  }
}

.sub-list {
  width: 88%;
  background: #fff;
  margin: 0px auto;

  ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    gap: 20px 50px;
    padding: 30px 50px;

    .item {
      width: calc((100% / 5) - (50px * 4 / 5));
      height: 320px;
    }
  }
}
</style>
